<template>
	<div id="app">
		<div class="wrap">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		methods: {

		}
	}
</script>

<style>
	
	#app {
		font-family: Helvetica, sans-serif;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	.wrap {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		opacity: 1;
		z-index: -1;
		background: linear-gradient(to bottom right, #bae7ff, #69c0ff);
		background: -webkit-linear-gradient(to bottom right, #69c0ff, #bae7ff);
	}
	
	.wrap ul {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -10;
	}
	
	.wrap ul li {
		list-style-type: none;
		display: block;
		position: absolute;
		bottom: -120px;
		width: 15px;
		height: 15px;
		z-index: -8;
		border-radius: 150px;
		background-color: rgba(255, 255, 255, 0.15);
		animotion: square 25s infinite;
		-webkit-animation: square 25s infinite;
	}
	
	.wrap ul li:nth-child(1) {
		left: 0;
		animation-duration: 10s;
		-moz-animation-duration: 10s;
		-o-animation-duration: 10s;
		-webkit-animation-duration: 10s;
	}
	
	.wrap ul li:nth-child(2) {
		width: 40px;
		height: 40px;
		left: 10%;
		animation-duration: 15s;
		-moz-animation-duration: 15s;
		-o-animation-duration: 15s;
		-webkit-animation-duration: 15s;
	}
	
	.wrap ul li:nth-child(3) {
		left: 20%;
		width: 25px;
		height: 25px;
		animation-duration: 12s;
		-moz-animation-duration: 12s;
		-o-animation-duration: 12s;
		-webkit-animation-duration: 12s;
	}
	
	.wrap ul li:nth-child(4) {
		width: 50px;
		height: 50px;
		left: 30%;
		-webkit-animation-delay: 3s;
		-moz-animation-delay: 3s;
		-o-animation-delay: 3s;
		animation-delay: 3s;
		animation-duration: 12s;
		-moz-animation-duration: 12s;
		-o-animation-duration: 12s;
		-webkit-animation-duration: 12s;
	}
	
	.wrap ul li:nth-child(5) {
		width: 60px;
		height: 60px;
		left: 40%;
		animation-duration: 10s;
		-moz-animation-duration: 10s;
		-o-animation-duration: 10s;
		-webkit-animation-duration: 10s;
	}
	
	.wrap ul li:nth-child(6) {
		width: 75px;
		height: 75px;
		left: 50%;
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
		-o-animation-delay: 7s;
		animation-delay: 7s;
	}
	
	.wrap ul li:nth-child(7) {
		left: 60%;
		animation-duration: 8s;
		-moz-animation-duration: 8s;
		-o-animation-duration: 8s;
		-webkit-animation-duration: 8s;
	}
	
	.wrap ul li:nth-child(8) {
		width: 90px;
		height: 90px;
		left: 70%;
		-webkit-animation-delay: 4s;
		-moz-animation-delay: 4s;
		-o-animation-delay: 4s;
		animation-delay: 4s;
	}
	
	.wrap ul li:nth-child(9) {
		width: 100px;
		height: 100px;
		left: 80%;
		animation-duration: 20s;
		-moz-animation-duration: 20s;
		-o-animation-duration: 20s;
		-webkit-animation-duration: 20s;
	}
	
	.wrap ul li:nth-child(10) {
		width: 120px;
		height: 120px;
		left: 90%;
		-webkit-animation-delay: 6s;
		-moz-animation-delay: 6s;
		-o-animation-delay: 6s;
		animation-delay: 6s;
		animation-duration: 30s;
		-moz-animation-duration: 30s;
		-o-animation-duration: 30s;
		-webkit-animation-duration: 30s;
	}
	
	@keyframes square {
		0% {
			-webkit-transform: translateY(0);
			transform: translateY(0)
		}
	
		100% {
			bottom: 400px;
			transform: rotate(600deg);
			-webit-transform: rotate(600deg);
			-webkit-transform: translateY(-500);
			transform: translateY(-500)
		}
	}
	
	@-webkit-keyframes square {
		0% {
			-webkit-transform: translateY(0);
			transform: translateY(0)
		}
	
		100% {
			bottom: 400px;
			transform: rotate(600deg);
			-webit-transform: rotate(600deg);
			-webkit-transform: translateY(-500);
			transform: translateY(-500)
		}
	}
</style>
